<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Horizontal from './Horizontal.vue'
  import Img from './Img.vue'

  export default {
    name: 'w-toggle',
    mixins: [WidgetBase],
    props: ['collapsedIcon', 'expandedIcon', 'target', 'expanded', 'align', 'valign'],
    methods: {
      x_default() {
        return {
          expanded: true,
          valign: 'middle',
        }
      },
      toggle(e = true) {
        let exp = typeof e === 'boolean' ? e : !this.x.expanded
        this.x.expanded = exp
        $.q(this.el()).nextUntil('.w-toggle').toggle(exp)
      },
      html_slots() {
        let exp = this.x.expanded
        let ico = exp ? this.x.expandedIcon : this.x.collapsedIcon
        return [ico && h(Img, {
          src: ico,
          class: ['w-toggle-icon', {'z-expanded': exp, 'z-collapse': !exp}],
        }), h(Horizontal, {class: 'w-toggle-main f-flex-1', align: this.x.align, valign: this.x.valign}, this.$slots.default)]
      }
    },
    computed: {
      html_props() {
        return {
          class: 'f-flex-align f-pointer',
          onclick: this.toggle
        }
      }
    },
    mounted() {
      if (!this.x.expanded) {
        this.toggle(false)
      }
    }
  }
</script>

<style>
  .w-toggle-icon {
    margin-right: 5px;
    flex-shrink: 0;
  }
</style>
